<template>
	<view class=select-address @click="chooseAddress">
		<image class="setAddr" src="../../static/icons/my_function_address@3x.png"></image>
		<!-- 没有默认收货地址的时候显示 -->
		<text v-if='!hasDefaultAddress && !selectAddr' class="unselect">请选择收货地址</text>
		
		<!-- 有收货地址后显示 -->
		<view class="addr-info" v-if="address.province" >
			<view class="nickname-phone">
				<text class="default-addr" v-if="address.isDefault==='1'">默认</text>
				<text class="nickname">{{address.contact}}</text> <text class="phone">{{address.phone}}</text>
			</view>
			<view class="addr">
				{{address.province}}{{address.city}}{{address.area}}{{address.address}}
			</view>
		</view>

		<image src="../../static/icons/my_order_rightarrow@3x.png" class="arr-r"></image>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		name: "my-address",
		props: {
			addressString: {
				type: Object,
				default: {}
			},
			hasDefaultAddress:{
				type:Boolean,
				default:false
			},
			selectAddr:{
				type:Boolean,
				default:false
			},	
			hasAddr:{
				type:Boolean,
				default:false
			},
			isChanged:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				defaultAdd: {}
			};
		},
		onShow() {
			
		},
		methods: {
			...mapMutations('m_user', ['updateAddress']),
			// 选择收货地址
			async chooseAddress() {
				// console.log(JSON.stringify(this.addressStr)=='{}')
				if (this.userInfo) {
					uni.navigateTo({
						url: '/subpkg/select-address/select-address?id='+this.userInfo._id
					})
				} else {
					uni.switchTab({
						url: '/pages/my/my'
					})
					uni.$showMsg('请先登录！')
				}
			},
		},
		computed: {
			...mapState('m_user', ['address','userInfo']),
			...mapGetters('m_user', ['addressStr'])
		}
	}
</script>

<style lang="scss">
	.default-addr {
		display: inline-block;
		width: 61rpx;
		height: 29rpx;
		line-height: 29rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #FFFFFF;
		background: #D80E0E;
		margin-right: 20rpx;
	}
	.unselect {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}

	.select-address {
		height: 117rpx;
		line-height: 117rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		border-top: 1rpx solid #DCDCDC;
		border-bottom: 1rpx solid #E8E8E8;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		position: relative;

		.setAddr {
			width: 32rpx;
			height: 44rpx;
			vertical-align: middle;
			margin-right: 15rpx;
		}

		.arr-r {
			width: 15rpx;
			height: 28rpx;
			position: absolute;
			right: 25rpx;
		}

		// 收货信息
		.addr-info {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			line-height: 50rpx;

			.phone {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				margin-left: 18rpx;
			}

			.addr {
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
				width: 520rpx;
				height: 40rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
</style>
